<script setup lang="ts">
import { appName } from '~/constants'
import { useUserInfoState } from './composables/states'

useHead({
  title: appName,
  meta: [
    { name: 'description', content: '孔雀宫，位于惠州的传统道观，由孔圣文化传媒有限公司运营，致力于弘扬中华优秀传统文化。' },
    { name: 'keywords', content: '孔雀宫, 惠州, 孔圣, 孔圣文化, 孔圣文化传媒, 道观, 传统文化' },
    { property: 'og:title', content: '孔雀宫 - 惠州孔圣文化传媒' },
    { property: 'og:description', content: '弘扬道观文化，传承孔圣智慧，孔圣文化传媒有限公司官方主页。' },
    { property: 'og:image', content: 'https://www.kongshengwh.com/assets/images/shouye.png' },  // 确保提供有效的 og:image
    { property: 'og:url', content: 'https://www.kongshengwh.com/' },
    // { name: 'twitter:card', content: 'summary_large_image' },
    // { name: 'twitter:title', content: '孔雀宫 - 惠州孔圣文化传媒' },
    // { name: 'twitter:description', content: '弘扬道观文化，传承孔圣智慧，孔圣文化传媒有限公司官方主页。' },
    // { name: 'twitter:image', content: 'https://your-domain.com/path-to-image.jpg' }
  ]
})
useSeoMeta({
  title: '孔雀宫 - 惠州孔圣文化传媒，道观文化传播与弘扬',
  ogTitle: '孔雀宫，位于惠州的传统道观，由孔圣文化传媒有限公司运营，致力于弘扬中华优秀传统文化。',
  description: '弘扬道观文化，传承孔圣智慧，孔圣文化传媒有限公司官方主页。',
})
const { getFingerprint, visitorLogin } = useFingerprint()
const userInfo = useUserInfoState()

onMounted(async () => {
  await getFingerprint()
  const data = await visitorLogin()
  userInfo.value = data
  console.log('app组件执行完了')
})
</script>

<template>
  <div>
    <VitePwaManifest />
    <NuxtLayout v-if="userInfo.id">
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<style>
html,
body,
#__nuxt {
  height: 100vh;
  margin: 0;
  padding: 0;
}

html.dark {
  color-scheme: dark;
}

html {
  overscroll-behavior: none;
  overflow: auto; /* 改为 auto */
}

body {
  overscroll-behavior: none;
  overflow: auto;
  width: 100vw; /* 适配屏幕宽度 */
  height: 100vh;
  margin: 0 auto;
  position: relative;
}

/* 手机样式 */
@media screen and (max-width: 768px) {
  body {
    width: 100vw;
  }
}
</style>
